<template>
  <view>
    <view
      v-if="show && maskHide"
      class="uni-mask"
      :class="['bg0006', classNameMask]"
      @tap="maskHide && hide"
    ></view>
    <view
      v-if="show"
      :class="[
        'uni-popup',
        'uni-popup-' + type,
        formPage ? 'uni-popup-' + formPage : '',
        className ? className : 'bgff',
      ]"
      :style="{
        width: width ? width + 'rpx' : '',
        'background-color': bgrColorNew ? bgrColorNew : bgrColor,
      }"
    >
      <view
        v-if="!showDelete"
        class="zIndex1000 wh48 flex-box"
        :class="closeName"
        @tap="hide">
        <server-image
          v-if="!showThemeDelete"
          class="img26"
          :name="closeIcon + '.png'"
          mode="widthFix"
        ></server-image>
        <server-image
          v-if="showThemeDelete"
          class="img26"
          name="repair/20241028003.png"
          mode="widthFix"
        ></server-image>
      </view>
      <view
        v-if="topTitle"
        class="w100 relative">
        <view
          :class="[topClass]">
          {{ topTitle }}
        </view>
      </view>
      <slot></slot>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    showDelete: {
      type: Boolean,
      default: false,
    },
    type: {
      type: String,
      //top - 顶部， middle - 居中, bottom - 底部
      default: 'middle',
    },
    width: {
      type: Number,
      default: 0,
    },
    bgrColor: {
      type: String,
      default: '#fffffff',
    },
    bgrColorNew: {
      type: String,
      default: '',
    },
    formPage: {
      type: String,
      default: '',
    },
    className: {
      type: String,
      default: '',
    },
    classNameMask: {
      type: String,
      default: '',
    },
    closeIcon: {
      type: String,
      default: 'repair/20241028003',
    },
    maskHide: {
      type: Boolean,
      default: true,
    },
    showThemeDelete: {
      type: Boolean,
      default: false,
    },
    // 顶部标题
    topTitle: {
      type: String,
      default: '',
    },
    topClass: {
      type: String,
      default: 'mg48440 pdb38 box-b bdb808 flex-box lh34 fs34 fw600 ffmi color26',
    },
    // 关闭按钮
    closeName: {
      type: String,
      default: 'absolute top40 right40',
    },
  },
  data() {
    return {};
  },
  methods: {
    hide: function () {
      this.$emit('hide');
    },
  },
};
</script>
<style lang="less" scoped>
.uni-mask {
  position: fixed;
  z-index: 998;
  top: 0;
  // right: 0;
  bottom: 0;
  // left: 0;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
}

.uni-popup {
  position: fixed;
  z-index: 999;
  // background-color: #ffffff;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
}

.uni-popup-middle {
  width: 320px;
  min-height: 150px;
  border-radius: 10px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  justify-content: center;
  /*padding: 30rpx;*/
}

.uni-popup-top {
  top: 88rpx;
  // left: 0;
  width: 100%;
  height: 100rpx;
  line-height: 100rpx;
  text-align: center;
}

.uni-popup-bottom {
  z-index: 1000;
  color: #ffffff;
  width: 614rpx;
  height: 480rpx;
  position: fixed;
  bottom: 60rpx;
  // left: 68rpx;
  text-align: center;
  margin: 0 68rpx;
}

.uni-popup-countdown {
  z-index: 1000;
  font-size: 30rpx;
  color: #fff;
  position: fixed;
  // left: 5%;
  bottom: 200rpx;
  width: 678rpx;
  height: 680rpx;
  // background: #00a4ff;
  border-radius: 10rpx;
  margin: 0 38upx;
}

.uni-popup-bottom-radio {
  position: fixed;
  bottom: 0;
  width: 100%;
  padding-bottom: 8rpx;
  z-index: 1000;
  // height: 840rpx;
  height: auto;
}

// 矿机合约start
.uni-popup-tv-top {
  background-color: #fff;
  position: fixed;
  /* #ifdef APP-PLUS */
  top: calc(var(--status-bar-height) + 52rpx);
  /* #endif */

  /* #ifndef APP-PLUS */
  top: 52rpx;
  /* #endif */

  bottom: 210rpx;
  // left: 30rpx;
  margin-left: 30rpx;
  width: 540rpx;
  z-index: 1000;
  height: auto;
  overflow-y: auto;
}

.uni-popup-contract {
  bottom: inherit;
}
// 矿机合约end

.uni-popup-center-top {
  position: fixed;
  /* #ifdef APP-PLUS */
  top: var(--status-bar-height);
  /* #endif */

  /* #ifndef APP-PLUS */
  top: 0;
  /* #endif */

  bottom: 0;
  // left: 0;
  width: 520rpx;
  z-index: 1000;
  height: auto;
  overflow-y: auto;
  border-radius: 0 20rpx 20rpx 0;
}

// 国家地区
.uni-popup-code {
  position: absolute;
  left: -20rpx;
  top: 0;
  right: auto;
  max-height: 600rpx;
  min-height: 600rpx;
  box-sizing: border-box;
  overflow: auto;
  z-index: 1000;
}
</style>
